<!-- 健康测评结果 -->
<template>
<div class="container">
    <div class="title">健康评估结果</div>
    <div class="desc">蓝色为身体最佳状态，红色为身体最差状态。指标所在的区间即表明目前的大概健康状况。</div>
    <div class="desc">{{evaluateRes.ALL.desc}}</div>
    <div class="rate">
        <div class="rate_block"></div>
        <div class="rate_pointer" :style="{backgroundPositionX:pointerX}"></div>
    </div>
    <div class="little_title">饮食 - {{ evaluateRes.FOOD.result }}</div>
    <div class="desc">{{ evaluateRes.FOOD.desc }}</div>
    <div class="little_title">运动 - {{ evaluateRes.SPORT.result }}</div>
    <div class="desc">{{ evaluateRes.SPORT.desc }}</div>
    <div class="little_title">压力 - {{ evaluateRes.PRESSURE.result }}</div>
    <div class="desc">{{ evaluateRes.PRESSURE.desc }}</div>
    <div class="little_title">吸烟 - {{ evaluateRes.SMOKE.result }}</div>
    <div class="desc">{{ evaluateRes.SMOKE.desc }}</div>
    <div class="little_title">饮酒 - {{ evaluateRes.DRINK.result }}</div>
    <div class="desc">{{ evaluateRes.DRINK.desc }}</div>

    <div class="title">个人健康指导</div>
    <div class="little_title">能量平衡</div>
    <div class="desc bgimg bg1">建议每日保证能量进出平衡，有饮食摄入与运动消耗。</div>
    <div class="little_title">饮食方式和营养素分配</div>
    <div class="desc bgimg bg2">营养均衡饮食，建议三大宏量营养素在全日能量中分别占比：碳水化合物50-70%、蛋白质20-30%、脂肪15-20%</div>
    <div class="little_title">碳水化合物</div>
    <div class="desc bgimg bg3">建议优先从蔬菜、水果、全谷食物、豆制品和奶制品中摄入碳水化合物，而非其他碳水化合物来源(精制米面等)。</div>
    <div class="little_title">蛋白质</div>
    <div class="desc bgimg bg4">建议选择优质蛋白质，主要来源为鱼、虾、豆制品类。</div>
    <div class="little_title">膳食脂肪</div>
    <div class="desc bgimg bg5">建议增加富含长链n-3脂肪酸(EPA和DHA)如鱼和n-3亚麻酸的食物摄入。</div>

    <div class="little_title">运动处方</div>
    <div class="desc bgimg bg6">运动时间:每天运动30分钟。<br>
        运动方式：有氧运动，如快走、慢跑、游泳、瑜伽等。<br>
        抗阻运动：如器械锻炼(哑铃、杠铃)、俯卧撑、深蹲起、卷腹等。<br>
        运动强度：中等强度有氧运动，运动时心率达到140次/分。<br>
        运动频率：一周至少有5天进行有氧运动，每周3次抗阻运动。</div>
    <div class="little_title">有氧运动与抗阻运动</div>
    <div class="desc bgimg bg7">有氧运动是指人体在氧气供应充分情况下进行的身体运动形式。适当的有氧运动能有效消耗摄入的能量，如快走、游泳、瑜珈等。<br>
        抗阻运动是指人体骨骼肌在克服外来阻力的情况下进行的主动运动。抗阻训练能明显改善骨骼肌力量和胰岛素敏感性，如俯卧撑、哑铃、卷腹等。<br>
        中等强度运动主要指快走(每小时4-6公里)，运动时心率达到最大心率(220-年龄)的60%-70%，锻炼时间30-40分钟。推荐热能消耗数值为150千卡/天，常见的方式包括快走、慢跑、划船、爬坡和功率自行车等。</div>
    <div class="little_title red">当您出现以下情况时，禁忌运动</div>
    <div class="desc">1.易发生低血糖者；<br>
        2.严重的1型糖尿病或血糖>16.8mmol/L；<br>
        3.并发高血压>200/100mmHg；<br>
        4.并发冠心病心律失常(室早、房早、房颤、心动过速等)；<br>
        5.心脏瓣膜病；<br>
        6.装有心脏起搏器；<br>
        7.新近发生的血栓；<br>
        8.有严重的静脉曲张/曾发生血栓性静脉炎者；<br>
        9.神经肌肉疾病或关节畸形而且有加重趋势者；<br>
        10.极度肥胖者(BMI≥32)。</div>

    <div class="tip">注:本报告的结论和建议不能作为临床诊断和治疗依据，仅供参考。任何医疗行为请遵从医。</div>
    <div class="submit" @click="$router.push('/home')">退出</div>
    <div class="submit" @click="$router.push('/evaluate')">重新测评</div>

</div>
</template>

<script>
export default {
    metaInfo() {
        return {
            title: '健康测评结果'
        }
    },
    name: 'CheckEvaluation',
    data() {
        return {
            userInfo: {},
            evaluateRes: {},
            pointerX: '0%' //健康总评指针位置
        }
    },
    components: {

    },
    created() {
        this.evaluateRes = JSON.parse(sessionStorage.getItem('evaluateRes'))
        this.pointerX = (100 - this.evaluateRes.ALL.scope) + '%'
    },
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))

    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/common.less';

.container {
    background-color: #fdfdfd;

    .title {
        font-size: 0.9375rem;
        font-weight: bold;
        color: @btn-color;
        background: linear-gradient(to right, @bg-color, #fdfdfd);
        padding: 1rem;
    }

    .little_title {
        display: inline-block;
        font-size: 0.875rem;
        font-weight: bold;
        // color: @font-color;
        background: linear-gradient(to right, @md-color, #fdfdfd) no-repeat;
        background-size: 100% 0.375rem;
        background-position: 1rem bottom;
        padding: 0.625rem 1rem 0.1875rem;

        &.red {
            background: linear-gradient(to right, @mdOrange-color, #fdfdfd) no-repeat;
            background-size: 100% 0.25rem;
            background-position: 1rem bottom;
            color: @red-color;
        }
    }

    .desc {
        padding: 0.375rem 1rem 0.5rem;
        line-height: 1.375rem;

        &.bgimg {
            padding: 0.375rem 1rem 0.5rem 3.75rem;
            background-repeat: no-repeat;
            background-size: 1.875rem;
            background-position: 1rem center;

            &.bg1 {
                background-image: url(../../assets/img/eva/1.png)
            }

            &.bg2 {
                background-image: url(../../assets/img/eva/2.png)
            }

            &.bg3 {
                background-image: url(../../assets/img/eva/3.png)
            }

            &.bg4 {
                background-image: url(../../assets/img/eva/4.png)
            }

            &.bg5 {
                background-image: url(../../assets/img/eva/5.png)
            }

            &.bg6 {
                background-image: url(../../assets/img/eva/6.png)
            }

            &.bg7 {
                background-image: url(../../assets/img/eva/7.png)
            }
        }
    }

    .tip {
        font-weight: bold;
        padding: 1rem;
    }

    .rate {
        .rate_block {
            margin: 1rem 1rem 0.125rem;
            height: 0.625rem;
            background: linear-gradient(to right, @red-color, #e99901, #ffdf25, #0fde7c, #009ddc);
        }

        .rate_pointer {
            height: 1.875rem;
            background-image: url(../../assets/img/eva/pointer.png);
            background-repeat: no-repeat;
            background-size: 1.875rem;
        }
    }

    .submit {
        width: 40%;
        display: inline-block;
        margin: 1.25rem 5%;
        text-align: center;
        padding: 0.75rem 0;
        background-color: @btn-color;
        color: #fff;
    }
}
</style>
